<template>
  <view class="home-header-user">
    <!-- 用户信息 -->
    <view class="hu-user">
      <view class="user-box ui-flex">
        <view class="user-avatar">
          <image
            class="user-avatar--image"
            src="http://thirdwx.qlogo.cn/mmopen/30iaR7PkSPLNfIj0wSfoblPuzSx46l0M55tCnibjn0BibRUOQvpZLdXAYMmCMQaK1riaXMXxrXw8RwQcNlOE17f1SA/132"
          />
        </view>
        <view class="user-content">
          <view class="user-main ui-flex flex--vcenter">
            <!-- 用户的昵称 -->
            <view class="user-nickname ui-txt txt-heading txt-white">徐小恋</view>
            <!-- 用户的徽章 -->
            <view class="user-tags">
              <!-- VIP -->
              <view class="tags-item">
                <image
                  class="tags-image"
                  src="/static/images/profile/tag-vip--active.png"
                  v-if="isVip === 1"
                  alt
                />
                <image class="tags-image" src="/static/images/profile/tag-vip.png" v-else alt />
              </view>
              <!-- 专属图标 -->
              <view class="tags-item">
                <image
                  class="tags-image"
                  src="/static/images/profile/tag-zs--active.png"
                  v-if="isExclusive === 1"
                  alt
                />
                <image class="tags-image" src="/static/images/profile/tag-zs.png" alt v-else />
              </view>
            </view>
          </view>
          <view class="user-tips ui-txt txt-caption txt-white">查看并编辑个人资料</view>
        </view>
      </view>
    </view>
    <!-- 会员信息 -->
    <view class="hu-vip">
      <view class="vip-box ui-flex flex--vcenter">
        <view class="vip-avatar">
          <image class="user-avatar--image" src="/static/images/profile/member.png" />
        </view>
        <view class="vip-divider"></view>
        <view class="vip-content">
          <template v-if="isVip === 1">
            <view class="myvip">VIP会员使用中</view>
            <view>将于{{this.istime | date_format("YYYY.MM.DD")}}到期</view>
          </template>
          <template v-else>
            <view>易法学院海量学习视频为学习加速！</view>
          </template>
        </view>
        <navigator url="/pages/profile-vip/index" class="vip-action" hover-class="none">
          <!-- 续费会员按钮 -->
          <image
            class="vip-action--image"
            src="/static/images/profile/alreadyait.png"
            v-if="isVip === 1"
          />
          <!-- 开通会员按钮 -->
          <image  class="vip-action--image" src="/static/images/profile/kaitong.png" v-else />
        </navigator>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "profileHeaderUserComponent",
  components: {},
  props: {
    isExclusive: String,
    isVip: String,
    istime: Number
  },
  data() {
    return {};
  },
  created() {},
  mounted() {},
  methods: {}
};
</script>

<style scoped lang="scss">
.home-header-user {
  position: relative;
  min-height: 330rpx;
  .hu-user {
    display: inline-block;
    width: 750rpx;
    height: 285rpx;
    background-image: url(http://www.yjzgo.com/lt-page-weixin-static/public/image/my/profile/bg.png);
    background-size: 750rpx 285rpx;
    background-repeat: no-repeat;

    padding: 34rpx 30rpx;
    box-sizing: border-box;
  }
  .user-box {
    align-items: center;
    
    .user-avatar {
      flex: 0 0 156rpx;
      .user-avatar--image {
        width: 120rpx;
        height: 120rpx;
        border-radius: 50%;
      }
    }
    .user-content {
      flex: 1;

      .user-main {
        .user-tags {
          display: inline-block;
          margin-left: 16rpx;
          vertical-align: middle;
          height: 30rpx;
          font-size: 0;
          .tags-item {
            position: relative;
            margin-left: 10rpx;
            display: inline-block;
            height: 30rpx;
            width: 30rpx;
            background-color: #fbe9e6;
            border-radius: 3rpx;
            vertical-align: middle;

            box-sizing: border-box;

            .tags-image {
              width: 24rpx;
              height: 24rpx;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
            }
          }
        }
      }
      .user-tips {
        margin-top: 13rpx;
      }
    }
  }

  .hu-vip {
    position: absolute;
    top: 188rpx;
    left: 0;
    right: 0;
    padding: 0 30rpx;
    min-height: 142rpx;
    .vip-box {
      width: 690rpx;
      height: 142rpx;
      background-color: #ffffff;
      box-shadow: 0px 6rpx 8rpx 0px rgba(218, 216, 215, 0.46);
      border-radius: 20rpx;
      padding: 0 40rpx;
      box-sizing: border-box;
    }
    .vip-avatar {
      flex: 0 0 102rpx;
      .user-avatar--image {
        width: 72rpx;
        height: 63rpx;
        margin-right: 32rpx;
      }
    }
    .vip-divider {
      flex: 0 0 2rpx;
      display: inline-block;
      height: 82rpx;
      width: 2rpx;
      background-color: #f8f9fa;
    }
    .vip-content {
      flex: 1;
    }
    .vip-action {
      flex: 0 0 160rpx;
      .vip-action--image {
        width: 160rpx;
        height: 78rpx;
      }
    }
  }
}
</style>
